<template>
	<div class="game-container report-container addMember-container">
		<div class="line-member"></div>
		<div class="addMember-content">
			<div class="form-header">
				<span>邀请绑定</span>
				<span>
					<code style="color:#FF3B30;">*</code>
					为必填项
				</span>
			</div>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item label="被邀请会员:" prop="inviteesUserName">
					<el-input
						v-model="form.inviteesUserName"
						v-symbols
						size="medium"
						maxlength="11"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						placeholder="4-11位，字母+数字组合"
						clearable
						autocomplete="off"
						style="width: 365px"
					></el-input>
				</el-form-item>
				<el-form-item label="邀请会员:" prop="inviteUserName">
					<el-input
						v-model="form.inviteUserName"
						v-symbols
						size="medium"
						maxlength="11"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						placeholder="4-11位，字母+数字组合"
						clearable
						autocomplete="off"
						style="width: 365px"
					></el-input>
				</el-form-item>
				<el-form-item label="备注信息:" prop="remark">
					<el-input
						v-model.trim="form.remark"
						size="medium"
						type="textarea"
						placeholder="请输入"
						show-word-limit
						clearable
						maxlength="50"
						style="width: 365px"
						@input="handleInput"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="add"
					>
						提交
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { notSpecial2, isHaveEmoji } from '@/utils/validate'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'

export default {
	name: routerNames.addMember,
	mixins: [list],
	data() {
		return {
			loading: false,
			form: {
				inviteUserName: undefined,
				inviteesUserName: undefined,
				remark: undefined
			}
		}
	},
	computed: {
		rules() {
			const reg1 = /^[A-Za-z]{1}(?=(.*[a-zA-Z]){0,})(?=(.*[0-9]){1,})[0-9A-Za-z]{3,10}$/

			const testUserName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error('不支持空格及特殊字符'))
				} else if (isRmoji) {
					callback(new Error('不支持表情'))
				} else if (!reg1.test(value)) {
					callback(
						new Error(
							'请输入4-11位，最少1个字母+数字组合，首位字母'
						)
					)
				} else {
					callback()
				}
			}

			return {
				inviteesUserName: [
					{
						required: true,
						validator: testUserName,
						trigger: 'blur'
					}
				],
				inviteUserName: [
					{
						required: true,
						validator: testUserName,
						trigger: 'blur'
					}
				],
				remark: [
					{
						required: true,
						message: '请输入备注信息',
						trigger: 'blur'
					}
				]
			}
		}
	},

	methods: {
		handleInput(val) {
			this.form.remark = val.replace(NO_SPECIAL_CHAR, '')
		},
		add() {
			this.loading = true
			const params = {
				...this.form
			}
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$confirm(
						`<strong>您是否确认要对执行该操作?</strong></br><span style='font-size:12px;color:#c1c1c1'>请谨慎操作</span>`,
						'确认提示',
						{
							dangerouslyUseHTMLString: true,
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}
					)
						.then(() => {
							this.$api
								.getoperateactivityInviteBindingsave(params)
								.then((res) => {
									this.loading = false
									const { code, msg } = res || {}
									if (code === 200) {
										this.$message({
											message: '提交成功'
										})
										this.reset()
									} else {
										this.$message({
											message: msg || '接口请求异常',
											type: 'error'
										})
									}
								})
								.catch(() => {
									this.loading = false
								})
						})
						.catch(() => {})
				}
			})
		},
		reset() {
			this.$refs['form'].resetFields()
			this.form = {
				inviteUserName: undefined,
				inviteesUserName: undefined,
				remark: undefined
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addMember-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.line-member {
		height: 50px;
	}
	.addMember-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;
		.form-header {
			height: 45px;
			line-height: 45px;
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
	}
	.addMember-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}

	//::v-deep  input::-webkit-outer-spin-button,
	//::v-deep  input::-webkit-inner-spin-button {
	//	display: none;
	//}
}
</style>
